<template>
  <div class="base">
    {{txt}}
    <ul>
      <li v-for="item in arr" :key="item.id" @click="HandlerExtend(item.id)">
        <div>
          {{ item.name }}
          <div>
            <p>{{ item.name }},{{item.code}}</p>
          </div>
        </div>
      </li>
    </ul>
   <ul>
      <li v-for="item in arr1" :key="item.id" @click="HandlerExtend(item.id)">
        <div>
          {{ item.name }}
          <div>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </li>
    </ul>
    <a-button primary @click="change">change</a-button>
    <div>子组件的inject:{{activeKey}}</div>
    <sonComponent></sonComponent>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, watch, watchEffect, getCurrentInstance,toRefs,inject } from 'vue'
import sonComponent from './sonComponent.vue'
export default defineComponent({
  components: {sonComponent},
  props: {
    lists: {
      type: Array,
      default: () => {
        return []
      },
    },
    tab: {
      type: String,
      default: "1",
    },
  },
  emits: ['HandlerExtend'],
  setup(props, { emit }) {
    // const { tab } = toRefs(props)
    let list = reactive([
      {
        id: 6,
        name: '广告位',
      },
    ])
    const change=()=>{
      list[0].code=1123;
    }
    let arr1 = ref([])
    const extendData = reactive([
      {
        id: 1,
        name: '频道页组件',
        child: [
          {
            id: 0,
            name: '运营位',
          },
          {
            id: 1,
            name: '活动预告',
          },
          {
            id: 2,
            name: '活动专区',
          },
          {
            id: 3,
            name: '每日钜惠',
          },
          {
            id: 4,
            name: '好物推荐',
          },
          {
            id: 5,
            name: '精品集结',

          },
        ],
      },
      {
        id: 2,
        name: '活动页组件',
        child: [
          {
            id: 0,
            name: '头图',
          },
          {
            id: 1,
            name: '卷包模块',
          },
          {
            id: 2,
            name: '爆品推荐',
          },
        ],
      },
    ])
    const HandlerExtend = (e) => {
      emit('HandlerExtend', e)
    }
    const params = reactive({
      arr:[]
    })
    const internalInstance = getCurrentInstance()
    let txt = ref("111")

    watch(
      () => props.tab,
      (el) => {
        el==1?arr1.value=list:arr1.value=extendData;
        txt.value = el
        //操作数据后更新视图
        internalInstance.ctx.$forceUpdate()
      }
    )
    watchEffect(() => {
      props.tab == 1 ? params.arr = list : params.arr = extendData
    })
     const activeKey = inject('activeKey', '1')
    return {
      txt,
      ...toRefs(params),
      list,
      extendData,
      HandlerExtend,
      arr1,
      activeKey,
      change
    }
  },
})
</script>
<style scoped lang="less">
.base {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      text-align: center;
      width: 50%;
      margin-bottom: 20px;

      //   background: red;
      >img {
        margin: 0 auto 5px;
      }
    }
  }
}
</style>
